// 继承类
import base from "../base.js";
// Api接口
import studentsApi from "../../api/students.js";
// 用来返回学生列表
import Student from "./index.js";
import Imgs from "./imgs.js";


export default class extends base {

    constructor() {
        super()
        this.student = {
            age: "18",
            city: "成都",
            email: "@QQ.com",
            name: "小朋友",
            sex: "男",
            tel: "12341832456",
            class: "",
        };
        this.className = [];
    };
    async getClass() {

        this.className = await studentsApi.getClass();

        this.rerender()
    }

    rerender() {

        this.student.class = this.className[0]._id
        this.selectEle.html(
            this.className.map(item => `<option value="${item._id}">${item.name}</option>`)
        ).val(this.student.class);


    }
    moutend() {
        this.getClass()
    }
    handle() {

        this.selectEle.on("change", e => {
            this.student.classclass = $(e.target).val()

        })
        this.btn.on("click", async e => {
            const data = await studentsApi.post(this.student);
            const _id = data._id;
            location.hash=`#/info/studentsImg/${_id}`
       
       

        })

        this.inpueEle.on("input", e => {
            const ele = $(e.target)
            const key = ele.attr("name");
            this.student[key] = ele.val()

        })

    };
    render() {
        const {
            age,
            city,
            email,
            name,
            sex,
            tel,
        } = this.student;
        this.el.html(
            `  
        <div>
           <h1>
         添加学生
           </h1>
           <table border="1" class="update-form">
           <tbody >
               <tr>
                   <th>姓名</th>
                   <th>
                   <input type="text" name="name" required value="${name}" lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                       
                   </th>
               </tr>
               <tr>
                   <th>年龄</th>

                   <th>
                   <input type="text" name="age" required value="${age}" lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                  
                   </th>
               </tr>
               <tr>
                   <th>性别</th>
                   <th>
                   <input type="text" name="sex" required value="${sex}" lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                   </th>
               </tr>
           
               <tr>
                   <th>电话</th>
                   <th>
                   <input type="text" name="tel" required value="${tel}" lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">

                   </th>
               </tr>
               <tr>
                   <th>邮箱</th>
                   <th>
                   <input type="text" name="email" required value="${email}" lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                  
                   </th>
               </tr>
               <tr>
                   <th>家庭地址</th>
                   <th>
                   <input type="text" name="city" required value="${city}" lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                   </th>
               </tr>
           </tbody>
       </table>
       <select name="className" id="" class="selectEle">
   </select>
       <div>
           <button class="btn">确认更新</button>
       </div>`);
        this.selectEle = $(".selectEle")
        this.btn = $(".btn");
        this.inpueEle = $(".update-form input")

    };;
}